<template>
  <div class="able-dinput textarea" :class="(isTrue(color)?color:'default')+(isTrue(hover)?'-hover':'')" v-if="inputType=='textarea'">
    <textarea 
      ref="ABLE_PRIVATE_TEXTAREA"
      :value="value" 
      :placeholder="placeholder" 
      :maxlength="maxlength"
      :autofocus="isTrue(autofocus)"
      :disabled="isTrue(disabled)"
      :rows="rows"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      @change="onChange"/>
    <p v-if="maxlength > 0 && isTrue(wordnum)">{{value.length}}/{{maxlength}}</p>
    <i class="disabled" v-if="isTrue(disabled)"></i>
  </div>
  <div class="able-dinput" :class="(isTrue(color)?color:'default')+(isTrue(hover)?'-hover':'')" v-else>
    <i :class="prefix" v-if="!isNull(prefix)"></i>
    <input 
      ref="ABLE_PRIVATE_INPUT"
      :value="value" 
      :type="inputType"  
      :placeholder="placeholder" 
      :maxlength="maxlength"
      :autofocus="isTrue(autofocus)"
      :disabled="isTrue(disabled)"
      @input="onInput"
      @focus="onFocus"
      @blur="onBlur"
      @change="onChange"/>
    <i class="iconfont icon-shanchu1 clearicon" v-if="!isNull(value) && value.length > 0 && isTrue(clearicon)" @click="clearInput"></i>
    <i class="wordnum" v-if="maxlength > 0 && isTrue(wordnum)">{{value.length}}/{{maxlength}}</i>
    <i :class="suffix" v-if="!isNull(suffix) && !isTrue(pswicon)"></i>
    <i :class="inputType=='password'?'iconfont icon-mimakejian pswicon':'iconfont icon-yincangbukejian pswicon'" v-if="isTrue(pswicon)" @click="pswInput"></i>
    <i class="disabled" v-if="isTrue(disabled)"></i>
  </div>
</template>

<script>
import { onMounted, ref } from '@vue/runtime-core'
import util from '../../assets/js/util'
export default {
  props: ['value','type','pswicon','rows','placeholder','color','maxlength','wordnum','autofocus','disabled','hover','clearicon','prefix','suffix'],
  emits: ['update:value','input','focus','blur','change'],
  setup(props,ctx) {
    let ABLE_PRIVATE_TEXTAREA = ref(null)
    let ABLE_PRIVATE_INPUT = ref(null)
    let inputType = ref('')
    function init() {
      // console.log(props)
      inputType.value = props.type
    }

    function onInput(e) {
      ctx.emit('update:value', e.target.value)
      ctx.emit('input', e)
    }

    function clearInput() {
      ctx.emit('update:value', '')
    }

    function pswInput() {
      inputType.value = inputType.value=='password'?'text':'password'
    }

    function focus() {
      if (props.type == 'textarea') {
        ABLE_PRIVATE_TEXTAREA.value.focus()
      } else {
        ABLE_PRIVATE_INPUT.value.focus()
      }
    }

    function blur() {
      if (props.type == 'textarea') {
        ABLE_PRIVATE_TEXTAREA.value.blur()
      } else {
        ABLE_PRIVATE_INPUT.value.blur()
      }
    }

    function onFocus(e) {
      ctx.emit('focus', e)
    }

    function onBlur(e) {
      ctx.emit('blur', e)
    }

    function onChange(e) {
      ctx.emit('change', e)
    }

    onMounted(()=>{
      init()
    })

    function isNull(s) {
      return util.isNull(s)
    }

    function isTrue(v) {
      if (typeof(v) == 'string') v = true
      if (typeof(v) == 'undefined') v = false
      return v
    }

    return{
      ABLE_PRIVATE_INPUT, ABLE_PRIVATE_TEXTAREA,
      inputType,
      focus, blur,
      onInput, onFocus, onBlur, onChange,
      clearInput, pswInput, isNull, isTrue,
    }
  },
}
</script>

<style lang="scss" scoped>
.able-dinput{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  margin: .2rem;
  border: .1rem solid #ccc;
  border-radius: 0.1rem;
  position: relative;
  input{
    width: 100%;
    padding: 0;
    padding-left: .6rem;
    outline: 0;
    border: 0;
    background-color: rgba(0,0,0,0);
    margin-top: 0.1rem;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #aaa;
    font-size: .9rem;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #aaa;
    font-size: .9rem;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #aaa;
    font-size: .9rem;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #aaa;
    font-size: .9rem;
  }
  i{
    margin: 0;
    color: #999;
  }
  .clearicon{
    color: #aaa;
    font-size: .9rem;
    cursor: pointer;
    padding: 0 .2rem;
  }
  .wordnum{
    font-style: normal;
    margin: 0 .2rem;
    margin-bottom: -.1rem;
    font-size: .8rem;
  }
  .pswicon{
    cursor: pointer;
  }
  .disabled{
    position: absolute;
    top:0;left:0;
    width: 100%;height: 100%;
    background-color: $color-disabled;
    border: 0;
    cursor: no-drop;
  }
}
.able-dinput:focus-within{
  border: .1rem solid #999;
}
.default-hover:hover{
  border: .1rem solid #999;
  box-shadow: .1rem .1rem .3rem #ccc;
}
.able-dinput.primary:focus-within,.able-dinput.primary-hover:focus-within{
  border: .1rem solid $color-primary;
}
.primary-hover:hover{
  border: .1rem solid $color-primary;
  box-shadow: .1rem .1rem .3rem #ccc;
}
.able-dinput.success:focus-within,.able-dinput.success-hover:focus-within{
  border: .1rem solid $color-success;
}
.success-hover:hover{
  border: .1rem solid $color-success;
  box-shadow: .1rem .1rem .3rem #ccc;
}
.able-dinput.warning:focus-within,.able-dinput.warning-hover:focus-within{
  border: .1rem solid $color-warning;
}
.warning-hover:hover{
  border: .1rem solid $color-warning;
  box-shadow: .1rem .1rem .3rem #ccc;
}
.able-dinput.error:focus-within,.able-dinput.error-hover:focus-within{
  border: .1rem solid $color-error;
}
.error-hover:hover{
  border: .1rem solid $color-error;
  box-shadow: .1rem .1rem .3rem #ccc;
}
// textarea
.textarea{
  display: block;
  padding: .1rem;
  textarea{
    width: calc(100% - .8rem);
    padding: 7px;
    border: 0;
    outline: none;
    resize: none;
    font-size: .9rem;
    color: #666;
  }
  p{
    display: inline-block;
    text-align: right;
    padding: .1rem .5rem;
    color: #999;
    background-color: rgba(0,0,0,0);
  }
}
@media screen and (max-width: $mobile-width+'px') {
.able-dinput{
  input{
    font-size: 12px;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #aaa;
    font-size: .8rem;
  }
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #aaa;
    font-size: .8rem;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #aaa;
    font-size: .8rem;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #aaa;
    font-size: .8rem;
  }
}
}
</style>